﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
<div class="container-div" id="orderIndex-vue" style="margin-bottom:150px">
    <div class="table-p">
        <el-table :data="tableData"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="OrderCode"
                             label="订单号">
            </el-table-column>
            <el-table-column prop="MaterialId"
                             label="物料编号">
            </el-table-column>
            <el-table-column prop="MaterialName"
                             label="物料名称">
            </el-table-column>
            <el-table-column prop="MaterialQuantity"
                             label="计划数量">
            </el-table-column>
            <el-table-column prop="PlaneQuantity"
                             label="完成数量">
            </el-table-column>
            <el-table-column prop="BatchQuantity"
                             label="未完成数量">
            </el-table-column>
            <el-table-column prop="Priority"
                             label="优先级"
                             :filters="[{text:'低',value:0},{text:'普通',value:1},{text:'紧急',value:2},{text:'加急',value:3}]"
                             :filter-method="filterPriority">
                <template slot-scope="scope">
                    <el-tag :type="priorityFormatter(scope.row.Priority)">
                        {{scope.row.Priority | priorityFilter}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="Status"
                             label="状态"
                             :filters="[{text:'创建',value:0},{text:'开始',value:1},{text:'暂停',value:2},{text:'终止',value:3}]"
                             :filter-method="filterStatus">
                <template slot-scope="scope">
                    <el-tag :type="StatusFilter(scope.row.Status)">
                        {{scope.row.Status | filterStatusTitle}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <a v-on:click="OrderOperator('开始',scope.row)" href="javascript:void(0)">开始</a>
                    <a v-on:click="OrderOperator('暂停',scope.row)" href="javascript:void(0)">暂停</a>
                    <a v-on:click="OrderOperator('终止',scope.row)" href="javascript:void(0)">终止</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin:50px 30px;margin-top:20px;">
        <el-pagination background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total" v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                       :current-page="pageSize" :page-sizes="[5,10,20]" :page-size="limit">
        </el-pagination>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#orderIndex-vue",
        data: {
            pageSize: 1,  // 当前页码
            limit:5,  //每页数据条数
            tableData: [],
            total:0
        },
        methods: {
            StatusFilter(tag) {
                let result = 'warning';
                switch (tag) {
                    case 0: {
                        result = 'info';
                        break;
                    }
                    case 1: {
                        result = 'success';
                        break;
                    }
                    case 2: {
                        result = '';
                        break;
                    }
                    case 3: {
                        result = 'danger';
                        break;
                    }
                    case 4: {
                        result = 'warning'
                        break;
                    }
                }
                return result;
            },
            priorityFormatter(Priority) {
                let result = "info"
                switch (Priority) {
                    case 0: {
                        result = "info"
                        break;
                    }
                    case 1: {
                        result = "success"
                        break;
                    }
                    case 2: {
                        result = ""
                        break;
                    }
                    case 3: {
                        result = "danger"
                        break;
                    }
                }
                return result;
            },
            filterPriority(value, row) {
                return row.Priority == value
            },
            filterStatus(value, row) {
                return row.Status == value;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = 1;
                this.limit = val;
                this.GetOrderNorFinished();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageSize = val;
                this.GetOrderNorFinished();
            },
            GetOrderNorFinished() {
                let url = '@Url.Content("~/OrderManage/OrderPreview/GetOrderNotFinished")'
                axios.get(url, {
                    params: {
                        pageSize: this.pageSize,
                        limit: this.limit
                    }
                }).then(res => {
                    let result = res.data;
                    this.total = result.total;
                    this.tableData=[]
                    for (order of result.data) {
                        let obj = {
                            OrderCode: order.OrderCode,
                            MaterialId: order.MaterialId,
                            MaterialName: order.MaterialName,
                            MaterialQuantity: order.MaterialQuantity,
                            PlaneQuantity: order.PlaneQuantity,
                            BatchQuantity: order.BatchQuantity,
                            Priority: order.Priority,
                            Status: order.OrderCurrentStatus
                        }
                        this.tableData.push(obj)
                    }
                }).catch(err => {
                    this.$message({
                        showClose: false,
                        message: '请求订单错误：' + err,
                        type: 'error'
                    });
                })
            },
            OrderOperator(operator, row) {
                let to_status = -1;
                switch (operator) {
                    case '开始': {
                        to_status = 1;
                        break;
                    }
                    case '暂停': {
                        to_status = 2;
                        break;
                    }
                    case '终止': {
                        to_status = 3;
                        break;
                    }
                }
                if (to_status == row.Status) {
                    // 当前状态就是切换状态
                    this.$message({
                        showClose: false,
                        message: '当前状态即为：“' + operator + '”状态',
                        type: 'warning'
                    });
                } else if (to_status == 2 && row.Status != 1) {
                    // 切换为暂停的前提为，状态是开始
                    this.$message({
                        showClose: false,
                        message: '当前订单未开始，无法切换到“暂停状态”',
                        type: 'warning'
                    });
                } else {
                    // 发生请求
                    this.ModifOrderStatus(to_status, row)
                }
            },
            ModifOrderStatus(to_status,order) {
                let url = '@Url.Content("~/OrderManage/OrderPreview/ModifOrderStatus")'
                axios.post(url, {
                    order: order,
                    to_status: to_status
                }).then(res => {
                    let result = res.data;
                    if (result.Status == "success") {
                        this.$message({
                            showClose: false,
                            message: '修改订单成功',
                            type: 'success'
                        });
                        this.GetOrderNorFinished();
                    } else {
                        this.$message({
                            showClose: false,
                            message: '修改订单失败：' + result.Message,
                            type: 'error'
                        });
                    }
                }).catch(err => {
                    this.$message({
                        showClose: false,
                        message: '修改订单失败：' + err,
                        type: 'error'
                    });
                })
            }
        },
        filters: {
            filterStatusTitle(Status) {
                let result = "未知";
                switch (Status) {
                    case 0: {
                        result = "创建"
                        break;
                    }
                    case 1: {
                        result = "开始"
                        break;
                    }
                    case 2: {
                        result = "暂停"
                        break;
                    }
                    case 3: {
                        result = "终止"
                        break;
                    }
                    case 4: {
                        result = '完成'
                        break;
                    }
                }
                return result
            },
            priorityFilter(Priority) {
                let result = "低"
                switch (Priority) {
                    case 0: {
                        result = "低"
                        break;
                    }
                    case 1: {
                        result = "普通"
                        break;
                    }
                    case 2: {
                        result = "紧急"
                        break;
                    }
                    case 3: {
                        result = "加急"
                        break;
                    }
                }
                return result;
            }
        },
        mounted() {
            this.GetOrderNorFinished()
        }
    })
</script>

